<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人博客后台</title>
    <!--<link th:href="@{/assets/css/bootstrap.css}" rel="stylesheet"/>-->
    <link th:href="@{/css/bootstraps.css}" rel="stylesheet" />
    <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <link th:href="@{/assets/js/morris/morris-0.4.3.min.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/custom-styles.css}" rel="stylesheet"/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
    <link th:href="@{/assets/js/dataTables/dataTables.bootstrap.css}" rel="stylesheet"/>
    <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <style>
        label {
            margin-top: 5px;
        }
    </style>
</head>

<body>
<div id="wrapper">

    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" th:href="@{'/manager/user'}">个人博客后台</a>
            <a class="navbar-brand" th:href="@{'/admin/sign_out'}">退出</a>
        </div>
    </nav>
    <!--/. NAV TOP  -->

    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a th:href="@{'/manager/user'}"><i class="fa fa-user"></i> 用户管理</a>
                </li>
                <li>
                    <a th:href="@{'/manager/category'}"><i class="fa fa-bars"></i> 分类管理</a>
                </li>
                <li>
                    <a class="active-menu" th:href="@{'/manager/article'}"><i class="fa fa-file-text-o"></i> 文章管理</a>
                </li>
                <li>
                    <a th:href="@{'/manager/comment'}"><i class="fa fa-envelope"></i> 评论管理</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">
        <div id="page-inner">

            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        博文管理
                        <small>Article of my blog</small>
                    </h1>
                </div>
            </div>
            <!-- /. ROW  -->

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            博文列表
                        </div>
                        <div class="panel-body">

                            <label>博文分类：</label>
                            <select id="articleCategories">
                                <option categoryId="">全部</option>
                            </select><br/><br/>

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-articles">
                                    <thead>
                                    <tr>
                                        <th>文章ID</th>
                                        <th>文章名称</th>
                                        <th>是否置顶</th>
                                        <th>阅读量</th>
                                        <th>评论数</th>
                                        <th>收藏数</th>
                                        <th>作者</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody-articles">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /. END ROW -->


            <footer>
                <p>Copyright &copy; 2020</p>
            </footer>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header alert-danger">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">警告信息</h4>
            </div>
            <div class="modal-body">
                请确认是否删除！
            </div>
            <div class="modal-footer">
                <button type="button" id="confirmBtn" class="btn btn-danger" data-dismiss="modal" articleId="">确认
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>
<!-- /. END MODAL -->

<!-- MODAL -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header alert-success">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">更新文章</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <label>文章标题:</label>
                        <input class="form-control" id="articleTitle">
                    </div>
                </div><br>
                <!-- /. END ROW -->
                <!--<div class="row">-->
                    <!--<div class="col-md-12">-->
                        <!--<label>文章简介：</label>-->
                    <!--</div>-->
                <!--</div>-->
                <!--&lt;!&ndash; /. END ROW &ndash;&gt;-->
                <!--<div class="row">-->
                    <!--<div class="col-md-12">-->
                        <!--<textarea id="articleSummary" class="form-control" rows="2"></textarea>-->
                    <!--</div>-->
                <!--</div>-->
                <!-- /. END ROW -->
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <label>是否置顶：</label>
                        <input type="checkbox" id="articleTop">
                    </div>
                    <!--<div class="col-md-8 col-sm-8 col-xs-8">-->
                        <!--<label>文章分类：</label>-->
                        <!--<select id="updateCategories"></select>-->
                    <!--</div>-->
                </div>
                <!-- /. END ROW -->
                <!--<div class="row">-->
                    <!--<div class="col-md-12">-->
                        <!--<label>文章题图：</label>-->
                        <!--<input class="form-control" id="articlePicture"/>-->
                    <!--</div>-->
                <!--</div>-->
                <!-- /. END ROW -->
                <!--<div class="row">-->
                    <!--<div class="col-md-12">-->
                        <!--<label>文章内容</label>-->
                        <!--<textarea id="articleContent" class="form-control" rows="12"></textarea>-->
                    <!--</div>-->
                <!--</div>-->
                <!-- /. END ROW -->

            </div>
            <div class="modal-footer">
                <button type="button" id="updateBtn" class="btn btn-success" data-dismiss="modal" articleId="">确认更新
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>
<!-- /. END MODAL -->



<!-- JS Scripts-->
<!-- jQuery Js -->
<script th:src="@{/assets/js/jquery-1.10.2.js}"></script>
<!-- Bootstrap Js -->
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<!-- Metis Menu Js -->
<script th:src="@{/assets/js/jquery.metisMenu.js}"></script>
<!-- Morris Chart Js -->
<script th:src="@{/assets/js/morris/raphael-2.1.0.min.js}"></script>
<script th:src="@{/assets/js/morris/morris.js}"></script>
<!-- DATA TABLE SCRIPTS -->
<script th:src="@{/assets/js/dataTables/jquery.dataTables.js}"></script>
<script th:src="@{/assets/js/dataTables/dataTables.bootstrap.js}"></script>
<!-- 引入自己写的JS -->
<script th:src="@{/assets/js/pages/article.js}"></script>
<!-- Custom Js -->
<script th:src="@{/assets/js/custom-scripts.js}"></script>
<script th:src="@{/toastr/toastr.min.js}"></script>

</body>
</html>